<template>
	<view class="TimeFormat">
		<view class="flex items-end" v-if="time">
			<view>
				<text class="f-36 font-bold ml-10rpx text-#000">{{ time.hours }}</text>
				<text class="text-#000 f-20 ml-10rpx">时</text>
			</view>
			<view>
				<text class="f-36 font-bold ml-10rpx text-#000">{{ time.mins }}</text>
				<text class="text-#000 f-20 ml-10rpx">分</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		mins: Number,
	},
	computed: {
		time() {
			const mins = this.mins;
			if (typeof mins !== "number") return null;
			if (mins < 0) return null;
			const hours = Math.floor(mins / 60);
			const remainingMinutes = mins % 60;
			return { hours, mins: remainingMinutes };
		},
	},
};
</script>

<style lang="scss" scoped>
.TimeFormat {
	line-height: 34rpx;

	.flex {
		display: flex;
	}

	.items-end {
		align-items: flex-end;
	}
	.f-36 {
		font-size: 36rpx;
	}

	.font-bold {
		font-weight: 700;
	}

	.ml-10rpx {
		margin-left: 10rpx;
	}

	.text-\#000 {
		color: rgb(0, 0, 0);
	}
	.f-20 {
		font-size: 20rpx;
	}
}
</style>
